<template>
  <view class="card_record">
    <uni-nav-bar @clickLeft="$ui.back()" dark color="#FFD76B" backgroundColor="#323232" background-color="#007AFF"
      left-icon="left" status-bar title="发布DDC交易委托" />
    <!-- nav -->
    <view class="tabs flex-row-between-center">
      <view v-for="(item,index) in tabNav" :key="index" @click="selectClick(item)"
        :class="['tab', index == navIndex ? 'active-tab' : '']">
        <text>{{item.name}}</text>
        <view :class="[index == navIndex ? 'slider' : 'none']"></view>
      </view>
    </view>
    <!-- 提交买单 start-->
    <view class="tab-content">
      <template v-if="navIndex == 0">
        <view class="container_box">
          <text class="title_label">当前市价</text>
          <text class="text_css">{{price}}CNY</text>
        </view>
        <view class="down_knwo">
          <view class="flex-row-center">
            <text class="jiaoyi_num">交易数量</text>
            <input placeholder="请选择您要交易的总数量" v-model="number" type="text" disabled="true" class="input_box">
          </view>
          <view style="margin-top: 51rpx;margin-bottom: 30rpx;" class="flex-row-center-all">
            <view class="number_btn" v-for="(item,index) in payNumberList" :key="index" @click="changeNumber(item)">
              {{item}}
            </view>
          </view>
          <view class="toast_title">
            交易数量只能为100的倍数</view>
        </view>
        <!-- <view class="flex-row-center container_box">
          <text class="title_label">手续费</text>
          <text class="text_css">{{fee}}</text>
        </view> -->
        <view class="flex-row-center container_box">
          <text class="title_label">付款方式</text>
          <u-checkbox-group v-model="paySWayList" placement="row" @change="checkboxChange">
            <u-checkbox :customStyle="{marginLeft: '8px'}" activeColor="#FFD76B" v-for="(item, index) in payWayList"
              :key="index" :label="item.name" :name="item.value">
            </u-checkbox>
          </u-checkbox-group>
        </view>
        <view class="flex-row-center container_box">
          <text class="title_label">付款时间</text>
          <text @click="payTimesShow = true" class="text_css">{{payment_time}}分钟</text>
          <u-picker :show="payTimesShow" :columns="payTimesList" @confirm="confirm" @cancel="payTimesShow = false">
          </u-picker>
        </view>
        <view class="fabu_btn" @click="submitBuy">确认发布</view>
        <view style="margin-top: 120rpx;box-sizing: border-box;">
          <u-radio-group v-model="agreeValue">
            <u-radio activeColor="#FFD76B" shape="square" label="同意并阅读"
              style="font-size: 22rpx;font-family: PingFang SC;font-weight: 500;color: #999999;"></u-radio>
            <text style="color: #D2B17C;font-size: 22rpx;font-family: PingFang SC;font-weight: 500;">《交易协议》</text>
          </u-radio-group>
        </view>
      </template>
      <!-- 提交买单 end -->
      <!-- 提交卖单 start -->
      <template v-if="navIndex == 1">
        <view class="container_box">
          <text class="title_label">当前市价</text>
          <text class="text_css">{{price}}CNY</text>
        </view>
        <view class="down_knwo">
          <view class="flex-row-center">
            <text class="jiaoyi_num">交易数量</text>
            <input placeholder="请选择您要交易的总数量" v-model="number" type="text" class="input_box">
          </view>
          <view style="margin-top: 51rpx;margin-bottom: 30rpx;" class="flex-row-center-all">
            <view class="number_btn" v-for="(item,index) in payNumberList" :key="index" @click="changeNumber(item)">
              {{item}}
            </view>
          </view>
          <view class="toast_title">
            交易数量只能为100的倍数</view>
        </view>
        <view class="container_box" style="margin-top: 30rpx;">
          <text class="title_label">手续费</text>
          <text class="text_css">{{fee}}</text>
        </view>
        <view class="flex-row-center container_box">
          <text class="title_label">付款方式</text>
          <u-checkbox-group v-model="paySWayList" placement="row" @change="checkboxChange">
            <u-checkbox :customStyle="{marginLeft: '8px'}" activeColor="#FFD76B" v-for="(item, index) in payWayList"
              :key="index" :label="item.name" :name="item.value">
            </u-checkbox>
          </u-checkbox-group>
        </view>
        <view class="flex-row-center container_box">
          <text class="title_label">付款时间</text>
          <text @click="shopayTimesShoww = true" class="text_css">{{payment_time}}分钟</text>
          <u-picker @confirm="payTimesShow = false" :show="payTimesShow" :columns="payTimesList"
            @cancel="payTimesShow = false"></u-picker>
        </view>
        <view class="flex-row-between">
          <view>
            <text style="font-size: 22rpx;font-family: PingFang SC;font-weight: 400;color: #999999;">您当前可售DDC:</text>
            <text
              style="font-size: 24rpx;font-family: PingFang SC;font-weight: 500;color: #333333;margin-left: 10rpx;">{{balance_amount}}</text>
          </view>
          <view
            style="font-size: 22rpx;font-family: PingFang SC;font-weight: bold;color: #6CAEE3;margin-bottom: 50rpx;">
            全部交易</view>
        </view>
        <view class="fabu_btn" @click="submitSell">确认发布</view>
      </template>
      <!-- 提交卖单 end -->
    </view>
    <view class="code_dialog u-flex u-ali-center" v-if="isDialog">
      <view class="code_dialog_box u-flex u-ju-center u-ali-center">
        <view class="" style="text-align: center;">
          请输入支付密码
        </view>
        <view class="">
          <u-code-input v-model="pay_word" :maxlength="6"></u-code-input>
        </view>
        <button @click="passwodBtn()">确认</button>
      </view>
    </view>
  </view>
</template>

<script>
  import {
    addBuy,
    getAddTrading,
    addSell
  } from '../../api/cardService/card.js'
  export default {
    data() {
      return {
        isDialog: false,
        tabNav: [{
          id: 0,
          name: '买单'
        }, {
          id: 1,
          name: '卖单'
        }],
        navIndex: 0,
        payNumberList: [100, 200, 500, 1000],
        paySWayList: [],
        payWayList: [{
          name: '微信支付',
          value: 1
        }, {
          name: '支付宝',
          value: 2
        }, {
          name: '银行卡',
          value: 3
        }],
        payTimesList: [
          [30, 60, 120]
        ],
        balance_amount: '', // 当前余额
        payTimesShow: false,
        agreeValue: '',

        pay_pass: '', // 支付密码
        pay_word: '', // 输入的支付密码
        is_fingerprint: '',
        is_face: '',
        number: '',
        min_amount: '',

        way: '',
        trading_currency: 'eos', //交易货币
        payment_time: 30, // 付款时间
        payment: '', // payment
        version: '',
        // 接口返回的
        price: '', // 当前价格
        fee: '', // 手续费
      }
    },
    methods: {
      // nav切换
      selectClick(item) {
        this.navIndex = item.id
        console.log('这是item.name=', item.name)
        if (item.id == 0) {
          this.getBuyList()
        } else if (item.id == 1) {
          this.getSellList()
        }
        this.pay_word = ""
      },
      confirm(e) {
        this.payment_time = e.value[0]
        console.log('confirm', e.value[0])
        this.payTimesShow = false
      },
      // 选择支付得方式
      checkboxChange(n) {
        this.payment = n
        console.log('change', n);
      },
      /**
       * 选择交易的数量
       */
      changeNumber(item) {
        this.number = item
      },
      passwodBtn() {
        if (this.navIndex == 0) {
          this.submitBuy()
        } else {
          this.submitSell()
        }
      },
      // 提交买单
      submitBuy() {
        if (this.pay_word == '') {
          if (this.pay_pass) {
            this.isDialog = true
            return;
          }
        } else {
          this.isDialog = false
        }

        addBuy({
          code: "usdt",
          price: this.price,
          min_amount: '',
          pay_pass: this.pay_word,
          version: '2.6.1',
          number: this.number,
          way: 0,
          trading_currency: 'pibc',
          payment: this.payment, // 数量乘以价钱加手续费
          payment_time: this.payment_time,
        }).then(res => {
          if (res.code == 200) {
            this.$ui.toast('发布买单成功')
            setTimeout(() => {
              uni.navigateBack()
            }, 700)
          } else if (res.msg == '支付密码错误') {
            this.$ui.toast('支付密码错误,请重新填写')
            this.pay_word = ''
            this.isDialog = true
          } else {
            this.$ui.toast(res.msg)
          }
        })
      },
      // 提交卖单
      submitSell() {
        if (this.pay_word == '') {
          if (this.pay_pass) {
            this.isDialog = true
            return;
          }
        } else {
          this.isDialog = false
        }
        addSell({
          code: "usdt",
          price: this.price,
          min_amount: '',
          pay_pass: this.pay_word,
          version: '2.6.1',
          number: this.number,
          way: 0,
          trading_currency: 'pibc',
          payment: this.payment, // 数量乘以价钱加手续费
          payment_time: this.payment_time,
          trading_fee: this.fee
        }).then(res => {
          console.log(res, 128371289);
          if (res.code == 200) {
            this.$ui.toast('发布卖单成功')
            setTimeout(() => {
              uni.navigateBack()
            }, 700)
          } else if (res.msg == '支付密码错误') {
            this.$ui.toast('支付密码错误,请重新填写')
            this.pay_word = ''
            this.isDialog = true
          } else {
            this.$ui.toast(res.msg)
          }
        }).catch(err=>{
          console.log(err, 198231729837918273891789312789);
        })
      },
      getBuyList() {
        getAddTrading({
          trading_currency: 'pibc',
          way: 0,
          type: 0, // 0是买单 1 是卖单
          payment_currency: ''
        }).then(res => {
          if (res.code == 200) {
            // 返回的data中
            // user 用户信息
            // currency pibc信息
            // balance_amount 余额
            // price 当前价格
            // fee 手续费
            // payment 已绑定的支付方式
            // time 付款时间可选内容
            if(!this.$ui.getStorage('userId')) { // 存储判断申诉按钮权限
              this.$ui.setStorage('userId', res.data.user.id)
            }
            this.pay_pass = res.data.user.pay_pass
            this.price = res.data.price
            this.fee = res.data.fee
            this.balance_amount = res.data.balance_amount || 0
          }
        })
      },
      getSellList() {
        getAddTrading({
          trading_currency: 'pibc',
          way: 0,
          type: 1, // 0是买单 1 是卖单
          payment_currency: ''
        }).then(res => {
          if (res.code == 200) {
            // 返回的data中
            // user 用户信息
            // currency pibc信息
            // balance_amount 余额
            // price 当前价格
            // fee 手续费
            // payment 已绑定的支付方式
            // time 付款时间可选内容
            console.log(res);
            this.price = res.data.price
            this.fee = res.data.fee
          }
        })
      }
    },
    onLoad() {
      // 获取买单信息
      this.getBuyList()
    }
  }
</script>

<style lang="less" scoped>
  .card_record {
    .tabs {
      height: 98rpx;
      background-color: #fff;
      padding: 0 227rpx;
      box-sizing: border-box;

      .tab {
        height: 98rpx;
        line-height: 98rpx;
        text-align: center;
        font-size: 26rpx;
        font-family: PingFang SC;
        font-weight: 500;
        color: #666666;
        position: relative;
      }

      .active-tab {
        color: #333333;
        font-size: 28rpx;
        font-weight: bold;
      }

      .slider {
        width: 74rpx;
        height: 2rpx;
        background: #D2B17C;
        position: absolute;
        left: 50%;
        transform: translateX(-50%);
        bottom: 0;
      }

      .none {
        display: none;
      }
    }

    .tab-content {
      margin-top: 30rpx;
      box-sizing: border-box;
      padding: 0 40rpx;
    }
  }

  .container_box {
    height: 71rpx;
    line-height: 71rpx;
    background: #FFFFFF;
    border-radius: 10px;
    margin-top: 30rpx;
  }

  .text_css {
    font-size: 24rpx;
    font-family: PingFang SC;
    font-weight: bold;
    color: #333333;
    margin-left: 28rpx;
  }

  .number_btn {
    width: 68rpx;
    height: 42rpx;
    border: 2rpx solid #E4E4E4;
    border-radius: 4rpx;
    line-height: 42rpx;
    text-align: center;
    margin-right: 20rpx;
  }

  .title_label {
    margin-left: 39rpx;
    font-size: 24rpx;
    font-family: PingFang SC;
    font-weight: 500;
    color: #666666;
  }

  .fabu_btn {
    font-size: 28rpx;
    font-family: PingFang SC;
    font-weight: bold;
    color: #FFD76B;
    width: 670rpx;
    height: 84rpx;
    background: #333333;
    border-radius: 10px;
    text-align: center;
    line-height: 84rpx;
    margin-top: 30rpx;
  }

  .down_knwo {
    height: 267rpx;
    background: #FFFFFF;
    border-radius: 10rpx;
    padding-top: 35rpx;
    box-sizing: border-box;
  }

  .input_box {
    margin-left: 30rpx;
    font-size: 24rpx;
    font-family: PingFang SC;
    font-weight: 400;
    color: #999999;
    border-bottom: 1rpx solid #E4E4E4;
    width: 461rpx;
  }

  .jiaoyi_num {
    font-size: 26rpx;
    font-family: PingFang SC;
    font-weight: 500;
    color: #666666;
    margin-left: 41rpx;
  }

  .toast_title {
    font-size: 22rpx;
    font-family: PingFang SC;
    font-weight: 400;
    color: #999999;
    padding-left: 175rpx;
    box-sizing: border-box;
  }

  .code_dialog {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100vh;
    background-color: rgba(0, 0, 0, 0.5);

    .code_dialog_box {
      flex-wrap: wrap;
      margin: 0 auto;
      width: 80%;
      height: 400rpx;
      background-color: #fff;
      box-shadow: 0 rgba(0, 0, 0, 0.5);
      border-radius: 10rpx;
    }
  }
</style>
